<template>
  <div>
    <el-select v-model="data.type">
      <el-option
        v-for="item in data.typeList"
        :key="item.id"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
    <el-input v-model="data.type"></el-input>
  </div>
</template>
<script setup lang="ts">
import { onMounted, onUnmounted, ref, watch } from 'vue'
interface typeOption {
  id: string
  label: string
  value: string
}
interface myData {
  type: string
  typeList: typeOption[]
}
const data = ref<myData>({
  type: '',
  typeList: []
})
const getDataByPiece = () => {
  const total = 50000
  const index = 0
  const len = 20
  function add(index: number) {
    const min = Math.min(total, index + len)
    const list = []
    for (let i = index; i < min; i++) {
      const obj: typeOption = {
        id: i + '',
        label: 'label' + i,
        value: 'value' + i
      }
      list.push(obj)
    }
    data.value.typeList = data.value.typeList.concat(list)
    if (min < total) {
      requestAnimationFrame(() => {
        add(index + len)
      })
    }
  }
  add(index)
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const getData = () => {
  const total = 10000
  const index = 0
  for (let i = index; i < total; i++) {
    const obj: typeOption = {
      id: i + '',
      label: 'label' + i,
      value: 'value' + i
    }
    data.value.typeList.push(obj)
  }
}
onMounted(() => {
  console.log('onMounted')
  // getData()
  getDataByPiece()
})
watch(
  () => data.value.typeList,
  () => {
    console.log(data.value.typeList.length)
  }
)
onUnmounted(() => {
  data.value.typeList.length = 0
})
</script>
<style lang="scss" scoped></style>
